<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>


<link href="<c:url value="/resources/css/bootstrap.css" />"
	rel="stylesheet">
<script src="<c:url value="/resources/js/bootstrap.min.js" />"></script>
<script src="<c:url value="/resources/js/jquery-1.11.1.js" />"></script>


<style type="text/css">
#container {
	width: 910px;;
	margin: 10px auto;
	height: auto;
	padding: 3px;
	border-style: solid;
	border-color: #8C8C8C;
	border-width: thin;
	border-style: solid;
}

#tblShow {
	border-width: thin;
	border-style: solid;
	border-color: #8C8C8C;
	background: #E6E6E6;
	width: 900px;
	border-style: solid;
}

.list {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.items {
	display: inline;
}

.items a {
	text-decoration: none;
	color: blue;
	font-weight: bold;
	font-size: 14px;
	margin-right: 5px;
}

.items a:HOVER {
	text-decoration: underline;
	color: #5C8FE3;
}

#table-header {
	width: 100%;
	height: 40px;
	padding-top: 10px;
	padding-left: 10px;
	color: #00DB00;
	font-size: 20px;
	font-weight: bold;
	padding-left: 10px
}

#sort-area {
	width: 70%;
	float: left;
	display: inline;
}

#handleArea {
	float: left;
	width: 30%;
}

#btnCreateNew {
	float: left;
}

#cbInActive {
	margin-left: 10px;
	width: 50px;
	float: left;
	display: inline;
}

#footer {
	width: 100%;
	height: auto;
	clear: both;
	margin-bottom: 10px;
	padding-bottom: 30px;
}

#Pagination-area {
	width: 280px;
	float: right;
	clear: both;
	border-style: solid;
	border-color: #8C8C8C;
	border-width: thin;
	padding-left: 15px;
	padding-bottom: 3px;
	padding-top: 3px;
}

#last,#forward,#backward,#first {
	text-decoration: none;
	padding-left: 10px;
}
</style>
</head>
<body>
	<div id="container">
		<div id="table">
			<table align="center" id="tblShow" class="table ">
				<!-- begin sorting, create and tick into checkbox include inactive -->
				<tr>
					<td colspan="5">
						<div id="table-header">Organisation List</div>
						<div id="sort-area">
							<ul class="list">
								<li class="items"><a href="#">All</a>|</li>
								<li class="items"><a href="#">0-9</a>|</li>
								<li class="items"><a href="#">A</a> <a href="#">B</a> <a
									href="#">C</a> <a href="#">D</a> <a href="#">E</a>|</li>
								<li class="items"><a href="#">F</a> <a href="#">G</a> <a
									href="#">H</a> <a href="#">I</a> <a href="#">J</a>|</li>
								<li class="items"><a href="#">K</a> <a href="#">L</a> <a
									href="#">M</a> <a href="#">N</a>|</li>
								<li class="items"><a href="#">O</a> <a href="#">P</a> <a
									href="#">Q</a> <a href="#">R</a>|</li>
								<li class="items"><a href="#">S</a> <a href="#">T</a> <a
									href="#">U</a> <a href="#">V</a>|</li>
								<li class="items"><a href="#">W</a> <a href="#">X</a> <a
									href="#">Y</a> <a href="#">Z</a>|</li>
							</ul>



						</div>
						<div id="handleArea">
							<button onclick="#" id="btnCreateNew">Create</button>
							<input type="checkbox" onchange="" id="cbInActive" />&nbsp;Include
							in-active

						</div>
					</td>
				</tr>
				<!-- end -->
				<!-- begin table header -->
				<tr>
					<th>Organisation Name</th>
					<th>Head Office Address Line 1</th>
					<th>Post Code</th>
					<th>contract</th>
					<th>Is Active?</th>

				</tr>

				<!-- end -->

				<!-- begin showing list information -->
				<c:forEach items="${list}" var="org">
					<tr>
						<td><a href="#">${org.organisationName}</a></td>
						<td>${org.address.nationId}</td>
						<td>${org.typeOfBusiness.siccode}</td>
						<td>${org.contact.firstName}</td>
						<td>${org.status}</td>
					</tr>
				</c:forEach>

			</table>
			<!-- end table show list information -->
		</div>
		<div id="footer">
			<div id="Pagination-area">
				<a href="#" onclick="" class="glyphicon glyphicon-step-backward"
					id="fisrt"></a> <a href="#" onclick=""
					class="glyphicon glyphicon-backward" id="backward"></a>&nbsp;|&nbsp;Page:
				<input type="text" name="page-value" id="pageValue"
					style="width: 35px;"> of 4
				<!-- put totals number of page here(4 will be removed) -->
				&nbsp;|&nbsp; <a href="#" class="glyphicon glyphicon-forward"
					id="forward"></a> <a href="#" onclick=""
					class="glyphicon glyphicon-step-forward" id="last"></a>
			</div>
		</div>
	</div>



</body>
</html>